import { lazyBatchReport } from '../report/index'

/**
 * 统计和计算fp: first-paint的时间
 * FCP:
 * 首次绘制时间，即浏览器开始渲染页面并显示第一个像素的时间,
 * FP 可能是任何视觉变化，包括背景色的变化等，不一定是 DOM 内容
 */

export default function observerPaint() {
  const entryHandler = (list) => {
    for (const entry of list.getEntries()) {
      if (entry.name === 'first-paint') {
        observer.disconnect() // 断开连接

        const json = entry.toJSON()

        const reportData = {
          ...json,
          type: 'performance',
          subType: entry.name,
          pageUrl: window.location.href,
        }

        // 数据上报
        lazyBatchReport(reportData)
      }
    }
  }

  const observer = new PerformanceObserver(entryHandler)

  // 监听paint类型的性能事件，buffered 为 true 表示确保观察到所有的paint事件
  observer.observe({ type: 'paint', buffered: true })
}
